// base
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
// less
import './index.less'

class Settlement extends Component {
  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
  }

  componentWillUnmount() {
    // onUnload
  }

  componentWillReceiveProps(nextprops) {}

  onUnitChange = data => {
    // 选择薪资水平
    this.props.onUnitChange(data)
  }

  onSettlementChange = data => {
    // 选择结算方式
    this.props.onSettlementChange(data)
  }

  render() {
    const { datasource = [], value, partUnitList, partUnitValue } = this.props
    return (
      <View className="Settlement_id78745">
        <View className="settlement-container">
          {partUnitList.map(e => (
            <View
              className={`settlement ${e.value === partUnitValue ? 'select' : ''}`}
              key={e.value}
              onClick={this.onUnitChange.bind(this, e.value)}
            >
              {e.unit}/{e.name}
            </View>
          ))}
        </View>
        <View className="title">结算方式</View>
        <View className="settlement-container">
          {datasource.map(e => (
            <View
              className={`settlement-unit ${e.value === value ? 'select' : ''}`}
              key={e.unit}
              onClick={this.onSettlementChange.bind(this, e.value)}
            >
              {e.short}
            </View>
          ))}
        </View>
      </View>
    )
  }
}

export default Settlement
